<p>Task Manager is a <a href="#root/_help_OFXdgB2nNk1F">promoted attributes</a> and
  <a
  href="#root/_help_CdNpE2pqjmI6">scripts</a>showcase present in the <a href="#root/_help_wX4HbRucYSDD">demo notes</a>.</p>
<h2>Demo</h2>
<p>
  <img src="Task Manager_task-manager.png">
</p>
<p>Task Manager manages outstanding (TODO) tasks and finished tasks (non-empty
  doneDate attribute). Outstanding tasks are further categorized by location
  and arbitrary tags - whenever you change tag attribute in the task note,
  this task is then automatically moved to appropriate location.</p>
<p>Task Manager also integrates with <a href="#root/_help_l0tKav7yLHGF">day notes</a> -
  notes are <a href="#root/_help_IakOLONlIfGI">cloned</a> into day note to
  both todoDate note and doneDate note (with <a href="#root/_help_kBrnXNG3Hplm">prefix</a> of
  either "TODO" or "DONE").</p>
<h2>Implementation</h2>
<p>New tasks are created in the TODO note which has <code>~child:template</code> 
  <a
  href="#root/_help_zEY4DaJG4YT5">relation</a>(see <a href="#root/_help_bwZpz2ajCEwO">attribute inheritance</a>)
    pointing to the task template.</p>
<h3>Attributes</h3>
<p>Task template defines several <a href="#root/_help_OFXdgB2nNk1F">promoted attributes</a> -
  todoDate, doneDate, tags, location. Importantly it also defines <code>~runOnAttributeChange</code> relation
  - <a href="#root/_help_GPERMystNGTB">event</a> handler which is run on attribute
  change. This <a href="#root/_help_CdNpE2pqjmI6">script</a> handles when e.g.
  we fill out the doneDate attribute - meaning the task is done and should
  be moved to "Done" note and removed from TODO, locations and tags.</p>
<h3>New task button</h3>
<p>There's also "button" note which contains simple script which adds a button
  to create new note (task) in the TODO note.</p><pre><code class="language-text-x-trilium-auto">api.addButtonToToolbar({
    title: 'New task',
    icon: 'check',
    shortcut: 'alt+n',
    action: async () =&gt; {
        // creating notes is backend (server) responsibility so we need to pass
        // the control there
        const taskNoteId = await api.runOnBackend(async () =&gt; {
            const todoRootNote = await api.getNoteWithLabel('taskTodoRoot');
            const {note} = await api.createNote(todoRootNote.noteId, 'new task', '');

            return note.noteId;
        });

        // we got an ID of newly created note and we want to immediatelly display it
        await api.activateNewNote(taskNoteId);
    }
});</code></pre>
<h3>CSS</h3>
<p>In the demo screenshot above you may notice that TODO tasks are in red
  color and DONE tasks are green.</p>
<p>This is done by having this CSS <a href="#root/_help_6f9hih2hXXZk">code note</a> which
  defines extra CSS classes:</p><pre><code class="language-text-x-trilium-auto">span.fancytree-node.todo .fancytree-title {
    color: red !important;
}

span.fancytree-node.done .fancytree-title {
    color: green !important;
}</code></pre>
<p>This <a href="#root/_help_6f9hih2hXXZk">code note</a> has <code>#appCss</code> 
  <a
  href="#root/_help_zEY4DaJG4YT5">label</a>which is recognized by Trilium on startup and loaded as CSS into
    the application.</p>
<p>Second part of this functionality is based in event handler described
  above which assigns <code>#cssClass</code> label to the task to either "done"
  or "todo" based on the task status.</p>